<template>
  <div style="text-align: right">
    <el-button type="primary" @click="addButton">添加类别</el-button>
  </div>
  <div class="demo-collapse">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="(item, firstIndex) in exerciseData" :key="firstIndex">
        <template #title> {{ item.CategoryName }} </template>
        <template #name> {{ firstIndex }} </template>
        <el-row v-for="(value,secondIndex) in item.Interval" :key="value" class="text_item">
          <el-button type="text" @click="listButton(firstIndex, secondIndex)">
            {{ value.IntervalName }}
          </el-button>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped>
.text_item {
  text-align: left;
}
</style>

<script lang="ts">
import { defineComponent, ref } from "vue";
import LocalData from "../dataGain/LocalData";
export default defineComponent({
  setup() {
    const activeName = ref("0");
    return {
      activeName,
      exerciseData: LocalData.methods.GetData("exercises"),
    };
  },
  methods:{
      addButton() {
          this.$message(`点击了add_button ` + this.$route.params.username);
          
      },
      listButton(firstIndex, secondIndex) {
        var url = "/option/" + this.$route.params.username + "/exercisesQuestions"+ firstIndex + secondIndex;
          this.$router.push(url);
      }
  }
});
</script>